<header>
    <div class="nav">
        <span class="close-btn"></span>
        <a href="" class="register-btn">注册</a>
   </div>
    <h1>欢迎登录平安官网</h1>
</header>

<div class="login-tab">
  <ul class="tab">
    <li class="no">短信验证码登陆</li>
    <li>账号密码登录</li>
  </ul>
  <ul class="tab-content">
    <li>
      <div class="input-item tel-item">
        <input class="tel" placeholder="请输入手机号码/用户名/身份证">
        <span></span>
       </div>
      <div class="input-item code-item">
        <input type="text" class="tel" placeholder="请输入密码">
        <button class="code-btn" >忘记密码?</button>
      </div>
    </li>
  </ul>
  <div class="login">
    <button type="text" value="登录">登录</button>
  </div>
  <p class="tips">登录即表示您已同意
    <a href="https://member.pingan.com.cn/pinganone/pa/paoasp.screen">《隐私条款和服务条款》</a>
  </p>

</div>



CSS代码

* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
}

header {
  display: block;
  height:10rem;
  padding-top: .2rem;
  background-size: 100% 100%;
  background-color:#FF8040;
}

.nav{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: .48rem;
  padding: 0 .4rem;
}

.register-btn {
  display: block;
  width: 1.88rem;
  height: 0.48rem;
  line-height:0.48rem;
  border: 1px solid #fff;
  border-radius: 2px;
  text-align: center;
  color: #fff;
  font-size: .28rem;
  margin-top: 1rem;
  padding: 0.4rem 0;
}

h1 {
  margin: 30px 0;
  padding: 2rem 1.56rem;
  font-size: 2rem;
  color: #fff;
}
.login-tab{
  margin-top: 2.32rem;
  background:#fff;
}
.tab{
  display: flex;
  height: 3rem;
  padding: 0 .4rem;
  border-bottom: 1px solid #ddd;
}
.tab li{
  position: relative;
  -webkit-box-flex:1;
  flex:1;
  height: 1rem;
  line-height: 1rem;
  margin:0 .4rem;
  text-align: center;
  font-size: 1.32rem;
  -webkit-tap-highlight-color: transparent;
  color:#ff6633;
}
.tab .no::after{
  content:'';
  display: block;
  position: absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height: 2px;
  background:#f05a23;
  top:48px;
}
.tab-content li{
  margin: 3.5rem 0 0 2.5rem;
}
.input-item {
  box-sizing: border-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  border-bottom: 1px solid #ddd;
  margin-right: 2.3rem;
}
.input-item input{
  -webkit-appearance: none;
  margin: 6px;
  border: none;
  outline: none;
  -webkit-box-flex: 1;
  flex: 1;
  padding: 0.5rem .14rem;
  font-size: .9rem;
  color: #171717;
  margin-top: 1rem;
}
.input-item:first-child{
  margin-bottom: 2.26rem;
}
.code-btn{
  margin: 0 1.4rem 0 0;
  color: #ff8028;
  font-size: 18px;
  border: none;
  background: #fff;
}
.login{
  padding: 40px;
}
.login button{
  display: block;
  margin: 0 auto;
  width: 20rem;
  height: 3rem;
  border: 0;
  background: #ff8028;
  color: #fff;
  font-size: 18px;
}
.tips{
  margin-top: .38rem;
  text-align: center;
  color: #616161;
  font-size: 0.8rem;
}
